<template>
  <div class="home">
    <el-carousel>
      <el-carousel-item v-for="(item,index) in banners" :key="index">
        <div
          class="bannerShow"
          :style="`
                background:url(${item.url}) center center no-repeat;
                background-size:contain contain;
                `"
        ></div>
      </el-carousel-item>
    </el-carousel>
    <div class="searchBox">
      <div class="searchTab">
        <span
          :class="{active:index==currentAct}"
          v-for="(item,index) in options"
          :key="index"
          @click="handleOption(index)"
        >
          <i>{{item.name}}</i>
        </span>
      </div>
      <div class="searchInput">
        <input
          type="text"
          v-model="searchText"
          :placeholder="options[currentAct].tips"
          @keyup.enter="handleSearch"
        />
        <span class="iconfont icon-research" @click="handleSearch"></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banners: [], //轮播图
      options: [
        {
          name: "攻略",
          tips: "搜索城市",
          targetUrl: "/raider?start=0&limit=3&city=",
        },
        {
          name: "酒店",
          tips: "请输入城市搜索酒店",
          targetUrl: "/hotel?cityName=",
        },
        {
          name: "机票",
          tips: "请输入出发地",
          targetUrl: "/air",
        },
      ],
      currentAct: 0, //当前点击
      searchText: "",
    };
  },
  created() {
    this.getBanners();
  },
  methods: {
    //获取轮播图
    getBanners() {
      this.$axios({
        url: "/scenics/banners",
      }).then((res) => {
        this.banners = res.data.data.map((img) => {
          return {
            ...img,
            url: this.$axios.defaults.baseURL + img.url,
          };
        });
      });
    },
    //切换搜索点击栏目
    handleOption(index) {
      this.currentAct = index;
      if (this.options[index].name == "机票") {
        this.$router.push("/air");
      }
    },
    //搜索
    handleSearch() {
      var item = this.options[this.currentAct];
      this.$router.push(item.targetUrl + this.searchText);
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  position: relative;
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  /deep/.el-carousel__container {
    height: 600px;
  }
  .el-carousel__item,
  .bannerShow {
    height: 100%;
  }
  .searchBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 600px;
    .searchTab {
      display: flex;
      .active {
        color: #333;
        &:after {
          background: #eee;
        }
      }
      span {
        width: 70px;
        height: 30px;
        color: #fff;
        position: relative;
        margin-right: 8px;
        cursor: pointer;
        i {
          position: absolute;
          z-index: 2;
          display: block;
          width: 100%;
          height: 100%;
          line-height: 30px;
          text-align: center;
        }
        &:after {
          position: absolute;
          top: 0;
          left: 0;
          display: block;
          content: "";
          width: 100%;
          height: 100%;
          transform: scale(1.1, 1.3) perspective(0.7em) rotateX(2.2deg);
          transform-origin: bottom left;
          background: rgba(0, 0, 0, 0.5);
          border: 1px solid hsla(0, 0%, 100%, 0.2);
          border-bottom: none;
          border-radius: 1px 2px 0 0;
          box-sizing: border-box;
        }
      }
    }
    .searchInput {
      background: #fff;
      border-radius: 0 5px 5px 5px;
      padding: 5px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      input {
        flex: 1;
        border: none;
        padding: 15px;
        font-size: 16px;
      }
      .icon-research {
        width: 50px;
        text-align: center;
        font-size: 22px;
        font-weight: 700;
        cursor: pointer;
      }
    }
  }
}
</style>